﻿

/* ------------------------------------------------------------------------------------
WELCOME HOME PAGE			 */
.home { min-height:748px; }

    .home_header, .home_table { width:100%; margin:0 auto; }
    
    .slideLogin .loclIcon,.slideLogin .loginBox,.selectYearHome li, .selectDateHome li, .selectMonthHome li, .preStep3_pre, .preStep2_pre, .preStep2_next, .nextStep, .slide_information h3, .birth_day dd, .gender dd a, .gender dt a, .finish, .user_information_next_step, .validate label, .validate dd, .continue, .user_information, .login u, .login i, .login a, .register, .home_table label, .btn_use { background-image:url("../../images/home/position.png"); background-repeat: no-repeat; }   
    
        
    .pass_info_account, .pass_info_email, .pass_info_account_password, .alert, .birth_day dd, .preStep, .gender label, .birth_day label, .user_information_next_step dd, .user_information_next_step dt, .finish, .user_information_next_step, .validate, .continue, .note div, .user_information label, .user_information input, .note, .user_information, .login u, .login i, .login a, .login, .slide, .register, .register label, .slide_home a , .register span, .register input, .home_table ul, .btn_use, .logo label, .logo a { position: absolute; }
    
    .validate, .user_information, .slide, .register, .logo label, .logo a { z-index:2; }
    
    .birth_day dd, .preStep, .user_information, .register label, .slide_home a , .register span, .register input { z-index:3; }
    /* ------------------------------------------------------------------------------------
    HEAD		
	*/
    .home_header  
    {
        background: #0F5980 url("../../images/home/header_background.jpg") no-repeat center top;
        height: 417px;         
        }
          
    .home_main
    {
        position: relative;
        z-index:0;
        overflow:hidden;
        height: 412px;        
    }
    
    .logo a{ left:0; top: 28px; }
    
    .logo label {height:25px; left:191px; top:47px; width:262px; text-indent:-1000px; }    
       .home_header .register input{z-index:1000000 !important}
             
    .slide { top:100px; }
    		 
		 .slide_home, .slide_information, .slideLogin { height:312px; position:relative;z-index:3}
		 /*--------------------- Login ------------*/
		 .slideLogin {float:left;width:990px;}
		.slideLogin .loginBox{background-position:-12px -483px;height:200px;width:400px;margin:45px 0 0 300px;}
		.slideLogin .loclIcon{height:66px;width:68px;background-position:-437px -487px;float:left;margin:15px 0 0 24px}
		.slideLogin .loginHome{padding:6px 0 0 99px !important;background:none !important;}
		.slideLogin .loginHome h3{margin-left:0px !important}
			/* ------------------------------------------------------------------------------------
		STEP 1			 */
			
			.home_header .register
			{
			 height:74px;
			 width:459px;
			 top:99px;
			 left:10px;   
			 font-size:12px;
			 color:#fff;
			 z-index:10 !important
			}				
		    
         
			.slide_information h3, .user_information_next_step dd a, .user_information_next_step dt a, .finish, .validate label, .continue, .login a, .btn_use, .slide_home a 
			{
				display: block; 				
				text-indent:-1000px; 
				overflow: hidden;  
				}        
           
            .register label  
            {
				font-weight:bold;
				left:84px;
				top:-26px;
				font-size:16px;
                }
                
            .register a  
            {            	
            	width: 143px; 
            	height: 38px;             	            	
            	top:1px;
            	left:265px;
            	}
                
            .register span { clear: left; left:209px; top:81px; text-align: right;  }
			
			.user_information input, .slide_home input 
			{				 
				height:23px; 
				font-size:18px;
				color:#999;				
				font-weight: bold;				
				border: none;
				background-color: Transparent;
				}
				
				.slide_home input { left:136px; top:8px; width:108px; }
				
				.preStep, .nextStep { height:62px; width:21px; }
				
				.nextStep { left:443px; top:74px; }
				
				.nextStep, .preStep2_next { background-position:-770px -8px;  }
				
				    a.preStep2_next:hover ,a.nextStep:hover { background-position:-802px -8px; }
				
				.preStep { display:block;  overflow:hidden; text-indent:-1000px;  }				
				
					.preStep2_pre { left:10px; top:102px; }
					
					.preStep3_pre, .preStep2_pre { background-position: -869px -8px;}
					
					    a.preStep3_pre:hover, a.preStep2_pre:hover { background-position: -839px -8px; }
					
					.preStep2_next { right:10px; top:102px; }
					
					.preStep3_pre { top:104px; left:30px; }
				
				.group1 { background-position:2px -143px; }
				
				.group2 { background-position:-55px -140px; }
				
				.group3 { background-position:-131px -138px; }
				
	.login  
	{
		color:#FFF;
		height:209px;
		left:550px;
		top:30px;
		width:434px; 
		}
		
		.login h1 { font-size:24px; font-weight: normal; line-height:32px; }
		
			.login h1 b { font-size:26px; font-weight: bold; }
			
		.login p { font-size:14px; line-height:22px; }
		
		.login a { 
           top: 167px; 
           left:0; 
           background-position:-756px -83px; 
           width: 188px;
           height:50px; 
           }
		   .login a:hover{background-position:-945px -83px; }
		
		.login u, .login i { display: block; }
		
			.login u { width:37px; height:24px; background-position:-208px -148px; left:-45px; top:0; }
			
			.login i { background-position:-256px -148px; height:15px; right:143px; top:140px; width:23px;} 
			
			
			/* ------------------------------------------------------------------------------------
		STEP 2			 */
		
		
		.slide_information h3 { width:246px; height:30px; background-position:-476px -93px; }
		
			.slide_information p { font-size:12px; width:548px; color:#fff; line-height:16px;  }
			
		.user_information { background-position:57px -221px; width:996px; height:110px; top:102px; left:8px;  }
		
		.note { left:100px; top:43px; }
		
		.note div { width: 4px;  background-color:#EDF6F9; left:-18px; top:5px; height:55px; }
			
			.note div div { height: 34px; background-color:#A4D2E3; top:0; left:0; }
		
		.user_information input { width: 195px; top:61px;  }	
		
			.info_account { left:96px; z-index:15 !important}
			
			.info_email { left:378px; }
					
			.info_password { left:662px; }
			
			.user_information_next_step label, .user_information label { font-size:12px; color:#666; font-weight: bold; }
			
			.user_information label { top:35px; }			
			
				.user_information label i { font-weight: normal; }
			
			.info_account_name { left:91px; }
			
			.info_account_email { left:373px; }
			
			.info_account_password { left: 657px; }
			
			.continue { width: 182px; height:50px; background-position:-297px -152px; left:403px; top:237px;z-index:0 }
			
			.user_information_next_step { background-position:57px -353px; height:120px; left:27px; top:104px; width:930px;  }
			
				.gender dd a, .gender dt a{ width:40px; height:57px; }
				
				.gender dd { left:123px; top:44px;}
				
					.gender dd a { background-position:-931px -436px; }
					
					.gender dd a:hover { background-position:-889px -436px; }
					
					.male { background-position:-889px -436px!important; }
					

					
				.gender dt { left:167px; top:44px;}
				
				.gender dt a{ background-position:-1017px -436px; }
				
				.gender dt a:hover{ background-position:-974px -436px; }
				
				.female { background-position:-974px -436px!important;}
				
				.birth_day label{ left: 265px; }
				
					.birth_day dd { top: 58px; color:#666; display: block;  height:35px; cursor: pointer; }
					
							.birth_day dd span { display:block; font-size:12px; font-weight:bold; padding:8px; }					 
					
						.birth_day .date {left:265px; width:104px; background-position: -889px -394px; }
						
						    .birth_day .date:hover { background-position: -889px -354px; }
						
						.birth_day .month { background-position:-1003px -394px; left:380px; width:137px; }
						    
						    .birth_day .month:hover { background-position:-1003px -354px; }
						
						.birth_day .year {background-position:-1151px -394px; left:528px; width:110px; }
						
						    .birth_day .year:hover { background-position:-1151px -354px; }
				
				.user_information_next_step label { top:25px; }
				
				.gender label { left: 122px; }
				
				.alert { left: 685px; top:25px; }
				    
				    .alert dd{ width:233px; padding-top:15px; }
				        
				        .alert b { color:#666666;  font-size:12px; }
				    
				        .slide_information .alert a { display: inline; font-weight: bold; color:#0066CC; }
				        
				            .user_information_next_step .alert label { font-weight: normal; font-size:11px; color:#333; padding-top:2px;  }
				
			
			.finish { width:182px; height:50px; background-position:-528px -152px; left:425px; top:237px; z-index:-1}
			
			/* validate */
			.horizontalElect{z-index:10000000 !important}
			.pass_info_account, .pass_info_email, .pass_info_account_password { display:block; width:14px; height:14px; top:66px; background-color:#f9f9f9; }			
			
			    .pass_info_account{ left:296px; }
			    
			    .pass_info_email { left:578px; }
			    
			    .pass_info_account_password { left: 862px; }
			    
			    .display { display: none; }
			
			.validate { left:90px; top:198px;height:55px }
			
			.validate dl { width:245px;  }
			
			.validate dt 
			{				
				border-left:1px solid #BF8600;
				border-right:1px solid #BF8600;
				background-color:#FBDB39;
				font-size:12px;
				color:#000;
				padding:12px 5px 0;
				
				}
				
				.validate label 
				{
					width:35px;
					height:31px;
					background-position:-476px -32px;
					float:left;	
					margin:0 8px;									
				}
				
				.validate dd { height: 10px;  background-position:-477px -16px;z-index:100000 !important }				
				
				.selectMonthHome { width:372px; }
				
				    .selectMonthHome li { background-position:-908px -10px; width:93px;  }
				    
				.selectDateHome { width:396px; }
				    
				    .selectYearHome li:hover, .selectDateHome li:hover, .selectMonthHome li:hover { background-position:-1027px -2px; color:#fff;z-index:1000 }
				    
				    .selectDateHome li { background-position:-965px -10px; width:36px;  }
				    
			  .selectYearHome { max-height:108px; overflow-y:scroll; width:386px; }
			  
			        .selectYearHome li { background-position:-960px -10px; width:41px;  }
				    
				
			
    /* ------------------------------------------------------------------------------------
    TABLE			 */    
        
    
    .home_table .main { position: relative; height:175px; }
    
    .home_table ul { top:34px; }
    
    .home_table li{ float:left; width:330px;  }
    
		.home_table p{ color:#666; font-size:12px; }
		
		.home_table label { width:77px; height:77px; display: block; overflow:hidden; float:left;  }
		
		.home_table h2 { font-size:18px; padding:5px 0; }
    
			.home_table a { color:#4D4D4D; text-decoration: none;}
			
				.home_table a:hover { color:#000; }
				
				    .btn_use { width:119px; height:30px; background-position:-271px -91px; left:77px; top:115px;  }

/*------------------------------add category by Sang-------------------------*/
.clearthis{clear:both}
.HomeCategory{float:left;padding:0px;width:677px}
	.HomeCategory .CateHeader, .HomeCategory .CateFooter,.HomeCategory .CateHeader .headerText,.cateCont,.homeSkip{background-image:url(../../images/bgCategoryPart.png);background-repeat:no-repeat;}
	
	.HomeCategory .CateHeader, .HomeCategory .CateFooter{width:677px;height:12px;float:left}
	.HomeCategory .CateHeader{background-position:0px 0px}
	.HomeCategory .CateHeader .headerText{background-position:-3px -78px;position:relative;z-index:100;height:44px;width:374px;left:-8px;top:10px;color:#FFF;font-size:14px;padding:17px 0 0 10px;font-weight:bold}
	.HomeCategory .CateFooter{background-position:0px -41px}
	.HomeCategory .CateContent{float:left;width:677px;background-image:url(../../images/bgCategory.png);background-repeat:repeat-y;padding:50px 0 15px 0px;}
	.HomeCategory .CateContent ul{float:left;width:660px}
	.HomeCategory .CateContent ul li{float:left;width:165px;height:100px;text-align:center;display:inline}
	.HomeCategory .CateContent ul li p{text-align:center;font-size:12px;font-weight:bold;color:#666;padding-top:5px}
	.HomeCategory .CateContent .iMain ul{width:600px}
	.HomeCategory .CateContent .iMain li { border-bottom:1px solid #E5E5E5; height:25px; clear:both; padding:5px 0 0;width:600px;height:24px}
	.HomeCategory .CateContent ul li a{width:74px;height:74px;float:left;background-image:url(../../images/categoryBG.jpg);clear:both;margin-left:43px}
				.selected1{background-position:0px 0px !important;}
				a.Cate1{background-position:0px -148px;}
				a.Cate1:hover{background-position:0px 0px;}
				.selected2{background-position:-74px 0px !important;}
				a.Cate2{background-position:-74px -148px;}
				a.Cate2:hover{background-position:-74px 0px;}
				.selected3{background-position:-148px 0px!important;}
				a.Cate3{background-position:-148px -148px;}
				a.Cate3:hover{background-position:-148px 0px;}
				.selected4{background-position:-222px 0px!important;}
				a.Cate4{background-position:-222px -148px;}
				a.Cate4:hover{background-position:-222px 0px;}
				.selected5{background-position:0px -74px !important;}
				a.Cate5{background-position:0px -222px;}
				a.Cate5:hover{background-position:0px -74px;}
				.selected6{background-position:-74px -74px !important;}
				a.Cate6{background-position:-74px -222px;}
				a.Cate6:hover{background-position:-74px -74px;}
				.selected7{background-position:-148px -74px !important;}
				a.Cate7{background-position:-148px -222px;}
				a.Cate7:hover{background-position:-148px -74px;}
				.selected8{background-position:-222px -74px!important;}
				a.Cate8{background-position:-222px -222px;}
				a.Cate8:hover{background-position:-222px -74px;}
				.selected1, .selected2, .selected3, .selected4, .selected5, .selected6,.selected7, .selected8{border:2px dotted #D8D8D8}
		.cateCont{background-position:-3px -147px;width:159px;height:43px;float:left;text-indent:-100000000px;}
		.cateContBound{padding-left:246px;float:left;padding-top:20px}
		a.cateCont:hover{background-position:-169px -147px}
		.homeSkip{width:169px;height:26px;background-position:0px -205px;float:right;position:relative;z-index:0;right:10px;top:-26px;}
		a.homeSkip:hover{background-position:-174px -205px}